﻿@model tcms.Models.RegisterModel
@{
	ViewBag.Title = "Register";
	Layout = "~/Views/Shared/_Layout.cshtml";
}
@section inlinestyle{

    form.cmxform label.error {
        text-align: left;
        color: red;
        font-style: italic;
        font-size: 12px;
    }

    form.cmxform label {
        text-align: right;
    }
}
<div class="row clearfix">
<form class="cmxform" autocomplete="off" method="post" action="@Url.Action("Register")">
@Html.AntiForgeryToken()
	<div class="row">
        <div class="span2">
        	<label for="reg_Name">姓名：</label>
        </div>
        <div class="span4">
		    <input id="reg_Name" name="Name" class="span6" type="text" />
        </div>
	</div>
	<div class="row">
        <div class="span2">
        	<label for="reg_UserName">用户名：</label>
        </div>
        <div class="span4">
		    <input id="reg_UserName" name="UserName" class="span6" type="text" />
        </div>
	</div>
	<div class="row">
        <div class="span2">
        	<label for="reg_Password">密码：</label>
        </div>
        <div class="span4">
		    <input id="reg_Password" name="Password" class="span6" type="password" />
        </div>
	</div>
	<div class="row">
        <div class="span2">
        	<label for="reg_ConfirmPassword">确认密码：</label>
        </div>
        <div class="span4">
		    <input id="reg_ConfirmPassword" name="ConfirmPassword" class="span6" type="Password" />
        </div>
	</div>
	<div class="row">
        <div class="span2">
        	<label for="reg_Role">角色：</label>
        </div>
        <div class="span6">
			<select id="reg_Role" name="Role" class="input-medium">
				<option value="staff">计划员</option>
				<option value="manager">领导</option>
				<option value="admin">管理员</option>
			</select>
        </div>
	</div>
	<div class="row">
		<input class="btn" id="signupsubmit" name="signup" type="submit" value="创建" />
	</div>
</form>
</div>

@section links {
    <link rel="stylesheet" href="~/Content/bootstrap/css/bootstrap.css" />
}

@section scripts {
    @Scripts.Render("~/bundles/js/jquery_form_validate")
<script type="text/javascript">
    $(function () {
        // validate signup form on keyup and submit
        var validator = $(".cmxform").validate({
            rules: {
                Name: "required",
                UserName: {
                    required: true,
                    minlength: 4,
                    remote: "@Url.Action("UserExist", "Account")"
                },
                Password: {
                    required: true,
                    rangelength: [4, 16]
                },
                ConfirmPassword: {
                    required: true,
                    rangelength: [4, 16],
                    equalTo: "#reg_Password"
                }
            },
            messages: {
                Name: "请输入姓名",
                UserName: {
                    required: "请输入用户名",
                    minlength: $.format("用户名长度至少为：{0}"),
                    remote: $.format("<strong>{0}</strong>已经存在")
                },
                Password: {
                    required: "请输入密码",
                    rangelength: $.format("密码长度必须介于{0}和{1}之间")
                },
                ConfirmPassword: {
                    required: "请再输入密码",
                    rangelength: $.format("密码长度必须介于{0}和{1}之间"),
                    equalTo: "两次输入的密码不匹配"
                }
            },
            // the errorPlacement has to take the table layout into account
            errorPlacement: function (error, element) {
                error.appendTo(element.parent());
            },
            // specifying a submitHandler prevents the default submit, good for the demo
            submitHandler: function (form) {
                $(form).ajaxSubmit({
                    success: function () {
                        alert("用户'" + $("input[name=Name]").val() + "'创建成功");
                        $(form).resetForm();
                    },
                    error: function (xhr) {
                        alert(xhr.responseText);
                    }
                });
            }
        });
    });
</script>
} @* end section scripts  *@
